<template>
  <!-- 小米轮播图开始 -->
  <div class="lunbo">
    <!-- <ul>
                <li><a href="#">手机</a> <span> &gt; </span> </li>
                <li><a href="#">电视</a><span> &gt; </span></li>
                <li><a href="#">电视 盒子</a><span> &gt; </span></li>
                <li><a href="#">笔记本 平板</a><span> &gt; </span></li>
                <li><a href="#">出行 穿戴</a><span> &gt; </span></li>
                <li><a href="#">智能 路由器</a><span> &gt; </span></li>
                <li><a href="#">健康 儿童</a><span> &gt; </span></li>
                <li><a href="#">耳机 音箱</a><span> &gt; </span></li>
                <li><a href="#">家电</a><span> &gt; </span></li>
                <li><a href="#">箱包</a> <span> &gt; </span> </li>
            </ul>
            <img width="1226px" :src="imageUrl" alt=""> -->

    <!-- <img width="1226px" src="@/assets/xiaomi/mi.jpg" alt=""> -->

    <el-carousel height="460px"  :interval="2000" arrow="always">
      <el-carousel-item v-for="item in lunboList" :key="item.id">
        
        <img :src="item.imageurl" alt="" @click="toDetail(item.prodId)">
      </el-carousel-item>
    </el-carousel>
  </div>
  <!-- 小米轮播图结束 -->
</template>

<script>
import {listLunbo} from '@/api/lunbo.js'


export default {
  data() {
    return {
        lunboList:[],
    };
  },

  created(){
    this.getList();
  },

  components: {},

  methods: {
    getList(){
        listLunbo().then(response=>{
            this.lunboList = response.data;
        })
    },

     toDetail(id){
      this.$router.push("/detail/"+id)
    }
  },
};
</script>

<style scoped>
.el-carousel__item{
  color: #475669;
  opacity: 0.75;
  margin: 0;

 
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.lunbo {
  width: 1226px;
  height: 460px;

  margin: auto;

  /* border: 1px red solid; */

  position: relative;
}

.lunbo ul {
  position: absolute;
  left: 0px;
  top: 0px;

  padding: 20px 0px;
  box-sizing: border-box;

  width: 234px;
  height: 460px;
  background-color: rgba(100, 100, 100, 0.4);
}
.lunbo ul li {
  height: 42px;
  line-height: 42px;

  list-style: none;
}

.lunbo ul li span {
  float: right;
  color: white;
  font-weight: bold;
  margin-right: 35px;
}

.lunbo ul li a {
  text-decoration: none;
  color: white;
  font-size: 15px;

  display: inline-block;
  /* width: 100%; */
  padding-left: 30px;
}
.lunbo ul li:hover {
  background-color: orangered;
}
</style>